<template>
<div class="custom-tree-container">
    <el-card>
    <div class="block">
        <el-button type="primary" size="small" icon="el-icon-refresh" @click="onRest">刷新</el-button>
        <el-tree
            style="margin-top: 20px"
            v-loading="loading"
            :data="data"
            :props="defaultProps"
            lazy
            :expand-on-click-node="false"
            :default-expand-all="false"
            :load="loadNode"
            @node-click="loadNode"
            node-key="id">
            <span class="custom-tree-node" slot-scope="{ node, data }">
                <span >
                    {{data.label}}<span v-if="data.companytype==1 && data.isincubate==1">(孵化)</span>
                </span>
                <el-button
                    v-if="data.id>0 && data.companytype==1"
                    type="text"
                    size="mini"
                    @click="() => handleCompanyForm(data)">
                    公司详情
                </el-button>
                <el-button
                    v-if="data.id>0 && data.companytype==2"
                    type="text"
                    size="mini"
                    @click="() => handleEntityForm(data)">
                    商城详情
                </el-button>
            </span>
        </el-tree>
    </div>
    <!--公司详情-->
    <el-dialog
        title="公司详情"
        :visible.sync="companyVisible"
        :before-close="hideCompanyForm"
        width="50%"
        top="5vh"
        v-dialogDrag
    >
    <template slot="title">
                <div class="avue-crud__dialog__header">
                    <span class="el-dialog__title">
                        <span style="display:inline-block;background-color: #3478f5;width:3px;height:20px;margin-right:5px; float: left;margin-top:2px"></span>
                       公司详情
                    </span>
                </div>
            </template>
        <el-card>
        <el-form >
            <el-form-item label-width="80px" label="基本信息" style="background: #e1e1e1"/>
            <el-form-item label-width="40px">
                <el-form-item label-width="100px" label="发起合伙人：" style="width:50%;display: inline-block;">
                    <span>{{launchcompany.companyname}}</span>
                </el-form-item>
                <el-form-item label="首席合伙人：" style=" margin-left: 20px; width:30%;display: inline-block;">
                    <span>{{company.chiefpartnername}}</span>
                    <span v-if="company.isincubate==1">(孵化)</span>
                    <span v-if="company.isdisplacement==1">(顶替)</span>
                </el-form-item>
            </el-form-item>

            <el-form-item label-width="100px" label="高级合伙人" style="background: #e1e1e1"/>
            <el-form-item>
                <el-table
                    :data="seniorpartner"
                    :header-cell-style="{background:'#F4F4F5',color:'#606266'}"
                    border
                >
                    <el-table-column label="序号"  type="index"  width="80"  align="center">
                        <template scope="scope">
                            <span>{{scope.$index + 1}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="usernick" align="center" label="用户昵称" />
                    <el-table-column prop="usermobile" align="center" label="手机号" />
                    <el-table-column prop="enterprisename" align="center" label="营业执照" />
                </el-table>
            </el-form-item>

            <el-form-item label-width="100px" label="普通合伙人" style="background: #e1e1e1"/>
            <el-form-item>
                <el-table
                    :data="generalpartner"
                    :header-cell-style="{background:'#F4F4F5',color:'#606266'}"
                    border
                >
                    <el-table-column label="序号"  type="index"  width="80"  align="center">
                        <template scope="scope">
                            <span>{{scope.$index + 1}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="usernick" align="center" label="用户昵称" />
                    <el-table-column prop="usermobile" align="center" label="手机号" />
                    <el-table-column prop="enterprisename" align="center" label="营业执照" />
                </el-table>
            </el-form-item>
        </el-form>
        </el-card>
        <div slot="footer" class="dialog-footer">
            <el-button @click.native="hideCompanyForm">取消</el-button>
        </div>
    </el-dialog>

    <!--公司详情-->
    <el-dialog
        title="商城详情"
        :visible.sync="entityVisible"
        :before-close="hideEntityForm"
        width="50%"
        top="5vh"
        v-dialogDrag
    >
             <template slot="title">
                <div class="avue-crud__dialog__header">
                    <span class="el-dialog__title">
                        <span style="display:inline-block;background-color: #3478f5;width:3px;height:20px;margin-right:5px; float: left;margin-top:2px"></span>
                       商城详情
                    </span>
                </div>
            </template>
        <el-card>
        <el-form >
            <el-form-item label-width="80px" label="基本信息" style="background: #e1e1e1"/>
            <el-form-item label-width="40px">
                <el-form-item label-width="100px" label="用户名：" style="width:50%;display: inline-block;">
                    <span>{{entityinfo.usernick}}</span>
                </el-form-item>
                <el-form-item label="手机号：" style=" margin-left: 20px; width:30%;display: inline-block;">
                    <span>{{entityinfo.usermobile}}</span>
                </el-form-item>
            </el-form-item>
            <el-form-item label-width="40px">
                <el-form-item label-width="100px" label="营业执照：" style="width:50%;display: inline-block;">
                    <span>{{entityinfo.enterprisename}}</span>
                </el-form-item>
                <el-form-item label="用户业绩：" style=" margin-left: 20px; width:30%;display: inline-block;">
                    <span>{{entityinfo.usertotalintegral}}</span>
                </el-form-item>
            </el-form-item>
        </el-form>
        </el-card>
        <div slot="footer" class="dialog-footer">
            <el-button @click.native="hideEntityForm">取消</el-button>
        </div>
    </el-dialog>
    </el-card>
</div>
</template>
<script>
    import {
        getCompanyList,
        getCompanyPosition,
        getEntityInfo
    } from "../../api/partnershipManagement/addPpartnership.js";
export default {
    data() {
        return {
            loading:false,
            companyVisible:false,
            entityVisible:false,
            formName: null,
            formMap: {
                add: "添加",
                edit: "编辑"
            },
            data:[],
            defaultProps: {
                children: "children",
                label: "title"
            },

            launchcompany:{},
            company:{},
            seniorpartner:[],
            generalpartner:[],
            entityinfo:{},
        };
    },

    methods: {
        onRest(){
            // this.loadfirstnode(resolve);
            this.data = [
                {
                    id: 0,
                    label: "平台",
                    companytype:1,
                    companylevel:0,
                    isincubate:0,
                    children: []
                }]
        },
        handleEntityForm(data){
            let query={
                userid:data.id
            }
            getEntityInfo(query).then(response => {
                if (response.code != 0) {
                    this.$message.error(response.message);
                    return false;
                }
                this.entityinfo=response.data;
                this.entityVisible=true;
            })
        },
        hideEntityForm(){
            this.entityinfo={};
            this.entityVisible=false;
        },
        handleCompanyForm(data){
            let query={
                companyid:data.id
            }
            getCompanyPosition(query).then(response => {
                    if (response.code != 0) {
                        this.$message.error(response.message);
                        return false;
                    }
                    this.launchcompany=response.data.launchcompany;
                    this.company=response.data.company;
                    this.seniorpartner=response.data.seniorpartner;
                    this.generalpartner=response.data.generalpartner;
                    this.companyVisible=true;
                })
        },
        hideCompanyForm(){
            this.companyVisible=false;
            this.launchcompany={};
            this.company={};
            this.seniorpartner=[];
            this.generalpartner=[];
        },
        loadNode(node, resolve) {
            //如果展开第一级节点，从后台加载一级节点列表
            if (node.level == 0) {
                this.loadfirstnode(resolve);
            } //如果展开其他级节点，动态从后台加载下一级节点列表
            if (node.level >= 1) {
                this.loadchildnode(node, resolve);
            }
        },
        //加载第一级节点
        loadfirstnode(resolve) {
            let data = [
                {
                    id: 0,
                    label: "平台",
                    companytype:1,
                    companylevel:0,
                    isincubate:0,
                    children: []
                }
            ];
            return resolve(data);
        }, //加载节点的子节点集合
        loadchildnode(node, resolve) {
            this.loading = true;
            let query ={
                pid:node.data.id,
                companytype:node.data.companytype,
                companylevel:node.data.companylevel,
            };
            getCompanyList(query)
                .then(response => {
                    this.loading = false;
                    if (response.code != 0) {
                        this.$message.error(response.message);
                        return false;
                    }
                    let data = response.data || [];
                    console.log(data)
                    return resolve(data);
                })
                .catch(() => {
                    this.loading = false;
                });
        }
    },
    created() {
    }
};
</script>

<style scoped >
.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
}
p {
    color: #333;
}
</style>
